<template>
    <div class="app-container">
        <el-row class="wrapper storage">
            <el-col :span="24" class="warp-main">
                <div class="el-bar">
                    <!--工具条-->
                    <el-col :span="24" class="toolbar" style="padding-top:10px">
                        <el-form :inline="true">
                            <el-form-item>
                                <el-button icon="el-icon-plus" @click="createStorage" type="primary">创建存储</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="queryKey" placeholder="关键字(针对存储名称)">
                                </el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button icon="el-icon-search" @click="storageQuery" type="primary">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>

                    <!--数据列表-->
                    <el-table v-loading="loadingStorageDataTable" :data="storageData" highlight-current-row style="width: 100%;">
                        <el-table-column prop="time" label="创建时间" sortable></el-table-column>
                        <el-table-column prop="name" label="存储名称" sortable></el-table-column>
                        <el-table-column :formatter="statusFormat" prop="status" label="状态" sortable></el-table-column>
                        <el-table-column prop="type" label="格式" sortable></el-table-column>
                        <el-table-column prop="mountPath" label="挂载点" sortable></el-table-column>
                        <el-table-column prop="appName" label="应用" sortable></el-table-column>
                        <el-table-column prop="namespace" label="所属空间" sortable></el-table-column>
                        <el-table-column prop="size" label="大小" sortable></el-table-column>
                        <el-table-column :formatter="accessModeFormat" prop="accessMode" label="访问模式" sortable></el-table-column>
                        <el-table-column prop="tip" label="操作" fixed="right">
                            <template slot-scope="scope">
                                <el-button icon="el-icon-delete" @click="deleteStorage(scope.$index, scope.row)" type="danger" size="small" class="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!--新增存储-->
                    <el-dialog title="创建存储卷" :visible.sync="storageVisible" :close-on-click-modal="true">
                        <el-form label-width="80px" class="form-top">
                            <el-form ref="f1" :model="form1" :rules="rules1" :inline="true" class="form-top">
                                <el-form-item label="名称" prop="pvcName">
                                    <el-input v-model="form1.pvcName" style="width:240px" placeholder="请输入名称"></el-input>
                                </el-form-item>
                                <el-form-item label="访问模式">
                                    <el-select v-model="selectAccessMode" placeholder="请选择访问模式">
                                        <el-option v-for="item in accessMode" :key="item.value" :label="item.label" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>

                            <el-form :inline="true" class="form-top">
                                <el-form-item label="大小">
                                    <el-slider size="mini" style="width:400px" :min="min" :max="max" v-model="selectSize" show-input>
                                    </el-slider>
                                </el-form-item>
                                <el-form-item>
                                    <el-radio-group @change="unitChange" v-model="unitSelect" size="small">
                                        <el-radio-button label="MB"></el-radio-button>
                                        <el-radio-button label="GB"></el-radio-button>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="类型">
                                    <el-radio-group v-model="selectType" size="mini">
                                        <el-radio-button label="nfs"></el-radio-button>
                                    </el-radio-group>
                                </el-form-item>
                            </el-form>

                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button class="iconfont icon-chehui" @click="storageVisible=false">取消</el-button>
                            <el-button class="iconfont icon-fuxuan" @click="createStorageCommit" type="primary">确定</el-button>
                        </div>
                    </el-dialog>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { validateNameInk8s } from '@/utils/validate';
export default {
    data() {
        return {
            rules1: {        
                pvcName: [
                    { validator: this.validatePvcName, trigger: 'blur' }
                ]
            },
            form1: {
                pvcName: '',
            },
            storageVisible: false,

            selectType: 'nfs',

            selectSize: 0,
            min: 100,
            max: 1023,
            unitSelect: 'MB',

            selectAccessMode: 'ReadWriteMany',
            accessMode: [
                {
                    value: 'ReadWriteMany', label: '读写多点共享'
                },
                {
                    value: 'ReadOnlyMany', label: '只读多点共享'
                },
                {
                    value: 'ReadWriteOnce', label: '读写单点独享'
                }
            ],

            selectedOptions2: [],
            options: [],
            selectStaus: '',
            status: [{
                value: '全部'
            }, {
                value: '完成'
            }, {
                value: '失败'
            }],

            //查询关键词
            queryKey: '',
            //节点数据
            storageData: [
            ],
            // 存储查询遮罩
            loadingStorageDataTable: false,
        }
    },
    methods: {
        //验证
        validatePvcName: function(rule, value, callback) {
            if (value == '') {
                callback(new Error('请输入名称'));
            } else {
                let namespace = this.userBaseInfo.getCurrentSelectedNamespace();
                let url = this.projectConfig.URL_API_APP_STORAGE_CLAIM_VALIDATE;
                url += "?namespace=" + namespace + "&pvcName=" + value;
                this.httpClient.httpClientget(url).then((response) => {
                    let data = response.data;
                    if (data) {
                        callback(new Error('存储名称已经存在,请输入其他名称!'));
                    } else {
                        callback();
                    }
                });
            }
        },
        //列格式化
        accessModeFormat: function(row, column, cellValue) {
            if (cellValue == 'ReadWriteMany') {
                return '读写多点共享';
            } else if (cellValue == 'ReadOnlyMany') {
                return '只读多点共享';
            } else if (cellValue == 'ReadWriteOnce') {
                return '读写单点独享';
            } else {
                return '';
            }
        },
        //列格式化
        statusFormat: function(row, column, cellValue) {
            if (cellValue == 'Pending') {
                return '初始化中';
            } else if (cellValue == 'Lost') {
                return '无效';
            } else {
                if (row.appName == undefined || row.appName == '') {
                    return '未使用';
                } else {
                    return '使用中';
                }
            }
        },
        //查询
        storageQuery() {
            let namespace = this.currentNs;
            let isSuperAdmin = this.userBaseInfo.getIsSuperAdmin();
            if (isSuperAdmin) {
                namespace = '';
            }
            let url = this.projectConfig.URL_API_APP_STORAGE_CLAIM;
            url += "?namespace=" + namespace + "&queryKey=" + this.queryKey;
            // 开启遮罩
            this.loadingStorageDataTable = true;
            this.httpClient.httpClientget(url).then((response) => {
                // 遮罩结束
                this.loadingStorageDataTable = false;
                let data = response.data;
                this.storageData = data;
            }).catch(error => {
                // 遮罩结束
                this.loadingStorageDataTable = false;
            });
        },
        //创建存储
        createStorage() {
            this.storageVisible = true;
            this.form1.pvcName = '';
        },
        //创建存储提交
        createStorageCommit() {
            this.$refs['f1'].validate((valid) => {
                if (valid) {
                    this.storageVisible = false;
                    let namespace = this.userBaseInfo.getCurrentSelectedNamespace();
                    let reqStorageSize = '';
                    if (this.unitSelect == 'MB') {
                        reqStorageSize = this.selectSize + 'Mi';
                    } else {
                        reqStorageSize = this.selectSize + 'Gi';
                    }
                    let url = this.projectConfig.URL_API_APP_STORAGE_CLAIM;
                    url += "?namespace=" + namespace + "&pvcName="
                        + this.form1.pvcName + "&pvcAccessMode=" + this.selectAccessMode + "&reqStorageSize=" + reqStorageSize;
                    // 操作审计
                    this.userBaseInfo.setOperObjectName(this.userBaseInfo.getCurrentSelectedNamespace() + ':' +  this.form1.pvcName);
                    this.httpClient.httpClientPost(url).then((response) => {
                        this.storageQuery();
                    });
                }
            });
        },
        // 删除
        deleteStorage: function(index, row) {
            this.$confirm("此操作将永久删除此存储, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    let url = this.projectConfig.URL_API_APP_STORAGE_CLAIM;
                    url += "?namespace=" + row.namespace + "&pvcName=" + row.name;
                    // 操作审计
                    this.userBaseInfo.setOperObjectName(row.namespace + ':' +  row.name);
                    this.httpClient.httpClientDelete(url).then((response) => {
                        this.storageQuery();
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        },
        unitChange: function(value) {
            if (value == 'MB') {
                //MB
                this.min = 100;
                this.max = 1023;
                this.selectSize = 100;
            } else {
                //GB
                this.min = 1;
                this.max = 1023;
                this.selectSize = 1;
            }
        }


    },
    mounted: function() {
        this.storageQuery();
    },
    computed: {
        currentNs() {
            return this.$store.getters.namespace;
        }
    },
    watch: {
        currentNs(val) {
            this.storageQuery();
        }
    }
}
</script>

<style>
.storage .el-table tr {
    text-align: center;
}

.storage .el-time {
    border: 1px solid;
    border-radius: 4px;
}

.storage .el-width {
    width: 400px;
}

.storage .el-bar {
    padding-bottom: 50px;
}

.storage .el-bar .nbd {
    border-bottom: none;
}

.storage .el-dialog__header {
    padding: 20px 20px 10px;
    border-bottom: 1px solid #ccc;
}

.storage el-icon-search {
    border: 1px solid #eaeaea;
    border-radius: 4px;
}

.storage .search .el-input {
    border: 1px solid #eaeaea;
}

.storage .el-date-editor--datetimerange {
    border: 1px solid #eaeaea;
    border-radius: 4px;
}

.storage .el-table .cell {
    padding: 0;
}
</style>